<template>
  <div class="info_container">
    <!-- 基本信息 -->
    <div class="info_title">项目基本信息</div>
    <el-form ref="form" label-width="100px">
      <el-form-item label="项目类型">
        <el-select v-model="addForm.add_type" placeholder="请选择项目类型" style="width:400px;">
          <el-option label="顶层项目" value="1"></el-option>
          <el-option label="同级项目" value="2"></el-option>
          <el-option label="下级项目" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称">
        <el-input v-model="addForm.title" placeholder="请输入项目名称" style="width:400px;"></el-input>
      </el-form-item>
      <el-form-item label="项目金额">
        <el-input type="number" v-model="addForm.money" placeholder="请输入项目金额" style="width:400px;"></el-input>
      </el-form-item>
      <el-form-item label="项目地址">
        <el-input
          type="textarea"
          v-model="addForm.address"
          placeholder="请输入项目地址"
          style="width:400px;"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="info_title">项目成员</div>
    <el-form ref="form" label-width="100px">
      <el-form-item label="项目经理">
        <div class="file_box">
          <el-checkbox-group v-model="addForm.role5_auth_ids">
            <el-checkbox
              v-for="(item,index) in personList1"
              :key="index"
              :label="item.id"
            >{{item.real_name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="商务经理">
        <div class="file_box">
          <el-checkbox-group v-model="addForm.role4_auth_ids">
            <el-checkbox
              v-for="(item,index) in personList2"
              :key="index"
              :label="item.id"
            >{{item.real_name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="技术总工">
        <div class="file_box">
          <el-checkbox-group v-model="addForm.role3_auth_ids">
            <el-checkbox
              v-for="(item,index) in personList3"
              :key="index"
              :label="item.id"
            >{{item.real_name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="施工队长">
        <div class="file_box">
          <el-checkbox-group v-model="addForm.role10_auth_ids">
            <el-checkbox
              v-for="(item,index) in personList4"
              :key="index"
              :label="item.id"
            >{{item.real_name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
    </el-form>
    <!-- 项目责任书 -->
    <div class="info_title">项目责任书</div>
    <el-form ref="form" label-width="100px">
      <el-form-item label="责任书名称">
        <el-input v-model="addForm.zrs_title" placeholder="请输入责任书名称" style="width:400px;"></el-input>
      </el-form-item>
      <el-form-item label="责任书详情">
        <div class="file_box">
          <vab-quill v-model="addForm.zrs_content" :min-height="400"></vab-quill>
        </div>
      </el-form-item>
      <el-form-item label="责任书附件">
        <div class="upFile_box">
          <el-upload
            :action="upFileUrl"
            :headers="headers"
            :file-list="files"
            name="files"
            :data="fileData"
            :limit="20"
            :on-exceed="handleExceed"
            :on-success="upSuccess1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传word/pdf/excel文件，且不超过20M</div>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <!-- 项目设计方案 -->
    <div class="info_title">项目设计方案</div>
    <el-form ref="form" label-width="100px">
      <el-form-item label="设计方案名称">
        <el-input v-model="addForm.sjfa_title" placeholder="请输入设计方案名称" style="width:400px;"></el-input>
      </el-form-item>
      <el-form-item label="设计方案详情">
        <div class="file_box">
          <vab-quill v-model="addForm.sjfa_content" :min-height="400"></vab-quill>
        </div>
      </el-form-item>
      <el-form-item label="设计方案附件">
        <div class="upFile_box">
          <el-upload
            :action="upFileUrl"
            :headers="headers"
            :file-list="files"
            name="files"
            :data="fileData"
            :limit="20"
            :on-exceed="handleExceed"
            :on-success="upSuccess2"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传word/pdf/excel文件，且不超过20M</div>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <!-- 项目验收标准 -->
    <div class="info_title">项目验收标准</div>
    <el-form ref="form" label-width="100px">
      <el-form-item label="验收标准名称">
        <el-input v-model="addForm.ysbz_title" placeholder="请输入验收标准名称" style="width:400px;"></el-input>
      </el-form-item>
      <el-form-item label="验收标准详情">
        <div class="file_box">
          <vab-quill v-model="addForm.ysbz_content" :min-height="400"></vab-quill>
        </div>
      </el-form-item>
      <el-form-item label="验收标准附件">
        <div class="upFile_box">
          <el-upload
            :action="upFileUrl"
            :headers="headers"
            :file-list="files"
            name="files"
            :data="fileData"
            :limit="20"
            :on-exceed="handleExceed"
            :on-success="upSuccess3"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传word/pdf/excel文件，且不超过20M</div>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
    <!-- 项目合同 -->
    <div class="info_title">项目合同</div>
    <el-form ref="form" label-width="100px">
      <el-form-item label="项目合同图片">
        <div class="upFile_box">
          <el-upload
            :action="upFileUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="files"
            name="files"
            :headers="headers"
            :data="fileData"
            :on-exceed="handleExceed"
            :on-success="upSuccess4"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
      </el-form-item>
    </el-form>
    <div>
      <el-form ref="form" label-width="100px">
        <el-form-item label="项目合同图片">
          <el-button type="primary" @click="submitForm">创建工程</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import vabQuill from "@/plugins/vabQuill";
import { addProject, getAllList } from "@/api/project";
export default {
  components: { vabQuill },
  data() {
    return {
      personList1: [], //项目经理
      personList2: [], //项目经理
      personList3: [], //项目经理
      personList4: [], //项目经理
      //添加项目信息对象
      addForm: {
        add_type: "1", //值为1添加顶级项目  必须参数
        title: "", // 项目标题必须参数
        address: "", // 项目地址 必须参数
        money: "", //项目金额 必须参数
        zrs_title: "", //项目责任书标题     选填参数
        zrs_content: "", //项目责任书富文本    选填参数
        zrs_files: "", //项目责任书附件（pdf、word、图片）        选填参数
        sjfa_title: "", //设计方案标题        选填参数
        sjfa_content: "", // 设计方案富文本      选填参数
        sjfa_files: "", //设计方案附件 （pdf、word、图片）         选填参数
        contract_pic: "", // 合同照片  选填参数
        ysbz_title: "", // 验收标准标题选填参数
        ysbz_content: "", // 验收标准富文本         选填参数
        ysbz_files: "", // 验收标准附件（pdf、word、图片）   选填参数
        role3_auth_ids: [], // 本层技术总工auth_id字符串类型用英文逗号隔开如：'1,2,3'     选填参数
        role4_auth_ids: [], //本层商务经理auth_id字符串类型用英文逗号隔开如：'1,2,3'     选填参数
        role5_auth_ids: [], //本层项目经理auth_id字符串类型用英文逗号隔开如：'1,2,3'     选填参数
        role10_auth_ids: [], //本层施工队长auth_id字符串类型用英文逗号隔开如：'1,2,3'     选填参数
      },
      // 责任书附件
      fileList1: [],
      // 技术方案
      fileList2: [],
      // 验收标准附件
      fileList3: [],
      // 合同附件
      fileList4: [],

      dialogImageUrl: "",
      dialogVisible: false,
      upFileUrl: "http://192.168.101.192/shouhuzhe/public/index/uploads/upload",
      fileData: {
        //请求的额外参数
        path_type: "1",
        file_type: "2",
      },
      headers: {
        "X-Requested-With": "XMLHttpRequest",
      },
      files: [],
    };
  },
  created() {
    var that = this;
    that.getMember();
  },
  mounted() {},
  methods: {
    //获取本层所有项目经理
    async getMember() {
      var that = this;
      //获取项目经理
      const res1 = await getAllList({ id: 5 });
      console.log(res1);
      that.personList1 = res1.data;
      //获取技术总工
      const res2 = await getAllList({ id: 3 });
      console.log(res2);
      that.personList2 = res2.data;
      //获取商务经理
      const res3 = await getAllList({ id: 4 });
      console.log(res3);
      that.personList3 = res3.data;
      //获取施工队长
      const res4 = await getAllList({ id: 10 });
      console.log(res4);
      that.personList4 = res4.data;
    },
    // 提交表单方法
    async submitForm() {
      var that = this;
      console.log(that.fileList1);
      that.addForm.role3_auth_ids = that.addForm.role3_auth_ids.toString();
      that.addForm.role4_auth_ids = that.addForm.role4_auth_ids.toString();
      that.addForm.role5_auth_ids = that.addForm.role5_auth_ids.toString();
      that.addForm.role10_auth_ids = that.addForm.role10_auth_ids.toString();
      that.addForm.zrs_files = that.fileList1.toString();
      that.addForm.sjfa_files = that.fileList2.toString();
      that.addForm.ysbz_files = that.fileList3.toString();
      that.addForm.contract_pic = that.fileList4.toString();
      console.log(that.addForm);
      const res = await addProject(that.addForm);
      console.log(res);
      if (res.status == 1) {
        that.$message({
          message: "添加工程成功",
          type: "success",
        });
      }
    },
    //上传图片前验证
    handleExceed(files, fileList) {
      console.log("上传图片前验证");
      console.log(files);
      console.log(fileList);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传责任书成功
    upSuccess1(res) {
      console.log("上传责任书成功");
      console.log(res);
      var that = this;
      if (res.data) {
        that.fileList1.push(res.data.utl);
      }
    },
    //上传技术方案
    upSuccess2(res) {
      console.log("上传技术方案");
      console.log(res);
      var that = this;
      if (res.data) {
        that.fileList2.push(res.data.utl);
      }
    },
    //上传验收标准
    upSuccess3(res) {
      console.log("上传验收标准");
      console.log(res);
      var that = this;
      if (res.data) {
        that.fileList3.push(res.data.utl);
      }
    },
    //上传合同
    upSuccess4(res) {
      console.log("上传合同");
      console.log(res);
      var that = this;
      if (res.data) {
        that.fileList4.push(res.data.utl);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.info_container {
  padding: 15px;
  .info_title {
    color: #000;
    font-weight: 600;
    font-size: 18px;
    padding-bottom: 20px;
  }
  .file_box {
    height: auto;
  }
  .upFile_box {
    height: auto;
  }
}
</style>
